<template>
<view class="container">
	<view class="shim"></view>
	<!-- 个人信息 -->
	<view class="padding">
		<view class="profile-banner padding-all box-shadow">
			<view class="profile-banner-avatar border-circle border-radius">
				<image class="profile-banner-cover border-radius"
					src="/static/v2_qb8b4c.png"
					mode="aspectFill" />
				<view class="profile-banner-text">旋风小子</view>
			</view>
			<uni-grid class="sec-top"
				:column="4"
				:showBorder="false"
				:square="false">
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">233</view>
						<view class="profile-item-text">求解答</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">233</view>
						<view class="profile-item-text">回复</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">233</view>
						<view class="profile-item-text">动态</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">233</view>
						<view class="profile-item-text">获赞</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
	<!-- Tab -->
	<view class="tab-view sec-top">
		<view class="tab-view-item"
			:id="0"
			:data-current="0"
			:class="{ 'active': active == 'all' }"
			@click="onTabClick('all')">
			<text class="tab-view-item--text">全部</text>
		</view>
		<view class="tab-view-item"
			:id="1"
			:data-current="1"
			:class="{ 'active': active == 'class' }"
			@click="onTabClick('class')">
			<text class="tab-view-item--text">班级动态</text>
		</view>
		<view class="tab-view-item"
			:id="2"
			:data-current="2"
			:class="{ 'active': active == 'faq' }"
			@click="onTabClick('faq')">
			<text class="tab-view-item--text">求解答</text>
		</view>
		<view class="tab-view-item"
			:id="3"
			:data-current="3"
			:class="{ 'active': active == 'answer' }"
			@click="onTabClick('answer')">
			<text class="tab-view-item--text">回答</text>
		</view>
		<view class="tab-view-item"
			:id="4"
			:data-current="4"
			:class="{ 'active': active == 'help' }"
			@click="onTabClick('help')">
			<text class="tab-view-item--text">求助</text>
		</view>
		<view class="tab-view-item"
			@click="onTabClick('search')">
			<text class="iconfont icon-search"
				style="font-size: 18px;"></text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 全部 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding detail-white sec-top">
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="shim-small"></view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 班级动态 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding detail-white sec-top">
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="shim-small"></view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 求解答 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding detail-white sec-top">
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="shim-small"></view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 回答 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding detail-white sec-top">
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="shim-small"></view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 求助 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding detail-white sec-top">
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="shim-small"></view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
export default {
	data() {
		return {
			active: 'all',
			tabIndex: 0,
			tabs: ['all', 'class', 'faq', 'answer', 'help']
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
	methods: {
		onItemClick(type, item) {
			uni.navigateTo({
				url: `/pages/faq/${ type }?id=${ item.id }&from=faq-profile`
			});
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'class':
					this.tabIndex = 1;
					break;
				case 'faq':
					this.tabIndex = 2;
					break;
				case 'answer':
					this.tabIndex = 3;
					break;
				case 'help':
					this.tabIndex = 4;
					break;
				case 'search':
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		}
	}
}
</script>
